<template>
  <div class="content">
    <div class="area_box">
      <div class="cat_back el-icon-arrow-left" @click="goBlack">返回</div>
      <div class="cat_hd">确认购买信息</div>
      <div class="cat_list">
        <el-table ref="multipleTable" :header-cell-style="{background:'#F3F4F7',color:'#555',height:'20px'}" :data="goodListALL" style="width: 100%">
          <!-- <el-table-column type="selection" width="55">
          </el-table-column> -->

          <!-- <el-table-column>
            <template slot-scope="scope">
              <img style="width:50px;height:50px" :src="scope.row.img" />
            </template>
          </el-table-column> -->
          <el-table-column prop="name" width="350" label="物品类型">
            <template slot-scope="scope">
              {{ scope.row.currencyType?gameType(scope.row.currencyType):scope.row.stdItemDetails.name}}
            </template>
          </el-table-column>
          <el-table-column prop="humanName" label="出售人">
            <template slot-scope="scope">
              {{isAnony?'***': scope.row.humanName}}
            </template>
          </el-table-column>
          <el-table-column prop="serverName" label="所在区服">
          </el-table-column>
          <el-table-column prop="currencyPrice" label="售价">

            <template slot-scope="scope">
              <b style="color:#d82141">{{ scope.row.currencyPrice || scope.row.itemPrice}}</b>
            </template>
          </el-table-column>
          <!-- <el-table-column width="120" align="center">
            <template slot-scope="scope">
              <span :style="{'color':'#d82141'}">{{scope.row.isBuyState?"不可购买":"可购买"}}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

    </div>
    <div class="area_box">
      <div class="cat_hd">填写下单信息</div>
      <div class="cat_bd">

        <div style="width:400px">
          <el-form ref="form" :model="formData" :rules="rules" class="cat-form">
            <!-- <el-form-item prop="username" label-width="100px" label="姓名">
              <el-input v-model="formData.username" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item prop="password" label-width="100px" label="手机号">
              <el-input v-model="formData.password" placeholder="请输入手机号" />
            </el-form-item> -->

            <el-form-item label="请选择绑定的角色" prop="M2Id">
              <el-select v-model="formData.M2Id" size="mini" :placeholder="errorMessage">
                <el-option v-for="item in humanList" :key="item.id" :label="item.humanName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <el-button @click="submit" :loading="loading" class="goBuy" type="danger">￥{{buyAllPic}} 提交订单</el-button>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import api from '../../api/game'
export default {
  data () {
    return {
      isAnony: false,
      currency: [],
      loading: false,
      errorMessage: '请选择角色',
      humanList: [],
      type: '',
      buyAllPic: 0,
      goodListALL: [],
      formData: {
        M2Id: ''
        // 注册数据
        // username: '',
        // password: ''
      },
      rules: {
        M2Id: [
          { required: true, message: '请选择绑定的角色', trigger: 'change' }
        ],
        username: [
          {
            required: true,
            message: '请输入姓名'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入手机号'
          },
          {
            validator: function (rule, value, callback) {
              var reg = /^1[3|4|5|6|7|8|9]\d{9}$/
              if (!reg.test(value)) {
                callback(new Error('手机号码格式不正确'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  // computed:{

  // 	goodList(){
  // 		return this.$store.state.goodList
  // 	},
  // },
  mounted () {
    console.log(this.$router)
    const list = localStorage.getItem('good_list')
    const shop = JSON.parse(localStorage.getItem('shop'))
    this.currency = JSON.parse(localStorage.getItem('currency'))
    this.type = localStorage.getItem('navIndex')
    this.isAnony = JSON.parse(localStorage.getItem('isAnony'))
    if (list) {
      if (JSON.parse(list).length > 0) {
        this.buyAllPic = 0
        this.goodListALL = JSON.parse(list)
        this.goodListALL.map(item => {
          this.buyAllPic += Number(item.currencyPrice || item.itemPrice)
        })
        // this.$refs.multipleTable.toggleAllSelection()
        api
          .HumanList({
            shopid: shop.ShopId,
            M2Id: shop.M2Id
          })
          .then(res => {
            var data = res.data
            if (data.errorMessage != '') {
              data.errorMessage == '未找到'
                ? (this.errorMessage = '请在游戏扫码绑定微信')
                : (this.errorMessage = '请绑定微信')
            }
            if (data) {
              this.humanList = data.data.humanArray
            }
          })
      } else {
        this.$router.replace({ path: './' })
      }
    } else {
      this.$router.replace({ path: './' })
    }
  },
  methods: {
    gameType (e) {
      for (var i = 0; i < this.currency.length; i++) {
        if (e == this.currency[i].id) {
          return this.currency[i].value
        }
      }
    },

    CreateOrder () {
      // 创建订单

      // console.log({
      //   humanId: this.formData.M2Id,
      //   purMessage: '金币购买',
      //   purType: 1,
      //   goodList: this.confirmData
      // })
      // return
      if (
        !localStorage.getItem('storage_key') &&
        !localStorage.getItem('token')
      ) {
        this.$message.error('请登录..')
        return
      }
      this.loading = true
      const shop = JSON.parse(localStorage.getItem('shop'))
      api
        .CreateOrder({
          shopId: Number(shop.ShopId),
          humanId: this.formData.M2Id,
          purMessage: this.goodListALL[0].currencyType
            ? '金币购买'
            : '道具购买',
          purType: this.goodListALL[0].currencyType ? 1 : 2,
          goodList: this.goodListALL
        })
        .then(res => {
          this.loading = false
          if (res.data.errno) {
            if (res.data.errno != 0) {
              this.$confirm(res.data.errmsg, '提示', {
                // confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(() => {
                  // const routeData = this.$router.resolve({
                  //   path: './my'
                  // })
                  // window.open(routeData.href, '_blank')
                })
                .catch(() => {})
            }
            return
          }
          if (res.data.order) {
            var orderItemFalse = []
            var orderItemOk = []
            for (var i = 0; i < this.goodListALL.length; i++) {
              res.data.ordergoods.map(NEWitem => {
                if (
                  NEWitem.status == 101 &&
                  NEWitem.geeId == this.goodListALL[i].id
                ) {
                  orderItemOk.push(this.goodListALL[i])
                }
                if (
                  NEWitem.status == 102 &&
                  NEWitem.geeId == this.goodListALL[i].id
                ) {
                  orderItemFalse.push(this.goodListALL[i])
                }
              })
            }

            sessionStorage.setItem('orderItemOk', JSON.stringify(orderItemOk))
            sessionStorage.setItem('order', JSON.stringify(res.data.order))
            sessionStorage.setItem(
              'orderItemFalse',
              JSON.stringify(orderItemFalse)
            )
            this.$router.push({ path: './payBuy' })
          }
        })
    },
    submit () {
      if (this.goodListALL.length <= 0) {
        this.$message.error('请选择购买的物品..')
      }
      // this.isBuyState = true
      // this.goodListALL[3].isBuyState = true
      // this.$refs.multipleTable.toggleRowSelection(this.goodListALL[3], false)
      this.goodListALL.map(item => {
        if (!item.currencyPrice) {
          item['currencyPrice'] = item['itemPrice']
          delete item['itemPrice']
        }
      })
      this.$refs.form
        .validate()
        .then(res => {
          if (res) {
            this.CreateOrder()
          }
        })
        .catch(err => {
          console.log('表单错误信息：', err)
        })
    },
    goBlack () {
      this.$router.go(-1)
    }
  },
  destroyed () {
    localStorage.removeItem('good_list')
    localStorage.removeItem('currency')
    localStorage.removeItem('isAnony')
  }
}
</script>

<style lang="less" scoped>
.cat_list {
  max-height: 400px;
  overflow: auto;
}
.content {
  min-width: 66%;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 30px;
  padding: 30px 0px;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uni-list-chat {
  padding: 20px 0px;
  width: 400px;
}
.uni-list-cha-image,
.uni-list-cha-image img {
  width: 60px;
  height: 60px;
}
.uni-list-chat-content-extra {
  width: 70%;
  font-size: 14px;
  color: #444444;
  line-height: 20px;
  margin-left: 5%;
}
.zhong-text {
  border: 1px solid #eeeeee;
  height: 60px;
  line-height: 60px;
  border-bottom: 0px;
  border-top: 0px;
  padding: 0px 50px;
  text-align: center;
  white-space: nowrap;
}
.you-text {
  text-align: center;
  width: 70%;
  padding: 40px 0px;
}

.cat-form {
  padding: 40px 0px 20px 10px;
}
.goBuy {
  height: 40px;
  line-height: 40px;
  background: #da2740;
  color: #ffffff;
  font-size: 18px;
  font-family: SimHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin-left: 130px;
  margin-bottom: 40px;
  white-space: nowrap;
  padding: 0px 20px;
}
.pice {
  flex: 1;
}
</style>
